<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>09_Vue实例_生命周期</title>
  </head>
  <body>
    <!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

    <div id="root">
      <p>{{count}}</p>
      <p>{{num}}</p>
      <p>{{a}}</p>
      <button @click="handleClick">按钮1</button>
      <button @click="a++">按钮2</button>
      <button @click="$destroy()">goDie</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#root",
        data: {
          count: 0,
          num: 1,
          a: 2,
        },
        methods: {
          handleClick() {
            this.count++;
            this.num++;
          },
        },
        // 初始化阶段：4个生命周期函数
        // 只会触发一次
        beforeCreate() {
          // beforeCreate是在数据代理之前触发的
          // 数据代理：将data、methods、computed等数据挂载this上，可以通过this直接使用
          console.log(this.count);
          console.log(this, "beforeCreate");
        },
        created() {
          console.log(this.count);
          console.log(this, "created");
        },
        beforeMount() {
          console.log(this.count);
          console.log(this, "beforeMount");
        },
        /*
          面试题: 请求在created发送还是mounted发送，为什么？
            created优势：发送请求的时机快一点，最终响应回来的速度就快一点
            mounted优势：
              1. 可以操作DOM
              2. 让首屏渲染速度更快一点
        */
        mounted() {
          // 发送请求、设置定时器、绑定事件等一次性任务
          // 页面挂载完毕，此时可以操作DOM
          console.log(this.count);
          console.log(this, "mounted");
        },
        // 更新阶段：2个生命周期函数
        beforeUpdate() {
          console.log(this.count);
          console.log("beforeUpdate");
        },
        updated() {
          console.log(this.count);
          console.log("updated");
        },
        // 卸载阶段：2个生命周期函数
        beforeDestroy() {
          // 收尾工作：清除定时器、解绑事件
          console.log("beforeDestroy");
        },
        destroyed() {
          console.log("destroyed");
        },
      });
    </script>
  </body>
</html>
